<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../din-pro-cond-cufonfonts-webfont/style.css">
    <link rel="stylesheet" href="./css/GlobalStyle.css">
    <link rel="stylesheet" href="./css/Titel.css">
    <link rel="stylesheet" href="./css/Gallery.css">
    <link rel="stylesheet" href="../font/font.css">
    <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="./script/nvabar.js"></script>
</head>

<body>
    <nav class="navbar" role="navigation">
        <div class="container">
            <img id='logo' src="../Logo/logo.svg" alt="">
            <div class='navbox'>
                <ul class='nav'>
                    <li class='navlist' style='background-color: #ac3b3b;'><a class=''
                            href='../html/IntroductionOfCollege.html'>学院介绍</a></li>
                    <li class='navlist'>教育教学</li>
                    <li class='navlist'>学生工作</li>
                    <li class='navlist'>科研成果</li>
                    <li class='navlist'>合作交流</li>
                    <li class='navlist'>社会服务</li>
                    <li class='navlist'><a href='../html/Gallery.html'>作品展示</a></li>
                    <li class="navspace"></li>
                    <li class="navbutton">
                        <img id="search" src="../icons/search.svg" alt="">
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="Carouselbox">
        <div class='CarouselboxImg' style="background: url('../img/学生作品banner.jpg');background-size: 100%;"></div>

    </div>
    <div id="GalleryTagTitel" style="width:auto;margin:auto;margin-top: 22px;margin-bottom: 22px;text-align: center;">
        <div style="display: inline-block;font-family: '思源黑体', 'Microsoft YaHei',Arial, Helvetica, sans-serif;
        font-size: 15px;color: #999999;width: 64px;padding:8px;text-align: center;">
            分类
        </div>
        <ul class="GalleryTagTitel" style="display: inline-block;">
            <li>全部作品</li>
            <li>视觉传达设计</li>
            <li>环境设计</li>
            <li>产品设计</li>
            <li> 风景园林设计</li>
            <li> 城市规划</li>
        </ul>
        <img src="../icons/search-24px.svg"
            style="display: inline-block;height: 20px;margin-bottom: -5px;margin-left: 40px;" alt="">
    </div>
    <!-- <div class="GalleryTabel" style="width: 100%;"></div> -->
    <div style="width: 100%">
        <table class="GalleryTabel" style="width: 98vw;margin: auto;" cellspacing="20">
            <tr>
                <td>
                    <div onclick="alrentBox()" class='GalleryTabelIMG'
                        style="background:url('../img/首页学生作品/作品1.jpg');background-size: 100%;"></div>
                    <div class="WorkName">
                        <div>
                            <p class='GalleryTabelName'>归园田居-深宫夏村景观规划设计</p>
                            <p class='GalleryTabelTag'>环境设计 / 景观设计</p>
                        </div>
                    </div>
                </td>
                <td>
                    <div class='GalleryTabelIMG' style="background:url('../img/首页学生作品/作品2.jpg');background-size: 100%;">
                    </div>
                    <div class="WorkName">
                        <div>
                            <p class='GalleryTabelName'>这厢有礼包装设计</p>
                            <p class='GalleryTabelTag'>视觉传达 / 包装设计</p>
                        </div>
                    </div>
                </td>
                <td>
                    <div class='GalleryTabelIMG' style="background:url('../img/首页学生作品/作品3.jpg');background-size: 100%;">
                    </div>
                    <div class="WorkName">
                        <div>
                            <p class='GalleryTabelName'>校点 App UI设计</p>
                            <p class='GalleryTabelTag'>视觉传达/交互式设计</p>
                        </div>
                        <p class="Cooperation">
                            合作项目
                            <img src="../icons/arrow_drop_down-24px.svg" alt="" style="margin-bottom: -5px;">
                        </p>
                    </div>
                </td>
                <td>
                    <div class='GalleryTabelIMG' style="background:url('../img/首页学生作品/作品4.jpg');background-size: 100%;">
                    </div>
                    <div class="WorkName">
                        <div>
                            <p class='GalleryTabelName'>回神啦 插画设计</p>
                            <p class='GalleryTabelTag'>视觉传达/毕业设计/插画设计</p>
                        </div>
                        <p class="Cooperation">
                            合作项目
                            <img src="../icons/arrow_drop_down-24px.svg" alt="" style="margin-bottom: -5px;">
                        </p>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class='GalleryTabelIMG' style="background:url('../img/首页学生作品/作品5.jpg');background-size: 100%;">
                    </div>
                    <div class="WorkName">
                        <div>
                            <p class='GalleryTabelName'>中国人居住环境设计学</p>
                            <p class='GalleryTabelTag'>环境设计 / 环境设计学</p>
                        </div>
                    </div>
                </td>
                <td>
                    <div class='GalleryTabelIMG' style="background:url('../img/首页学生作品/作品6.jpg');background-size: 100%;">
                    </div>
                    <div class="WorkName">
                        <div>
                            <p class='GalleryTabelName'>村邻乡舍</p>
                            <p class='GalleryTabelTag'>环境设计 / 手绘</p>
                        </div>
                    </div>
                </td>
                <td>
                    <div class='GalleryTabelIMG' style="background:url('../img/首页学生作品/作品7.jpg');background-size: 100%;">
                    </div>
                    <div class="WorkName">
                        <div>
                            <p class='GalleryTabelName'>摄影</p>
                            <p class='GalleryTabelTag'>视觉传达 / 摄影</p>
                        </div>
                    </div>
                </td>
                <td>
                    <div class='GalleryTabelIMG' style="background:url('../img/首页学生作品/作品8.jpg');background-size: 100%;">
                    </div>
                    <div class="WorkName">
                        <div>
                            <p class='GalleryTabelName'>隼木集集合家具创意设计</p>
                            <p class='GalleryTabelTag'>产品设计 / 农业机械设计</p>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class='GalleryTabelIMG' style="background:url('../img/首页学生作品/作品5.jpg');background-size: 100%;">
                    </div>
                    <div class="WorkName">
                        <div>
                            <p class='GalleryTabelName'>回家喝酒 家用酿酒产品设计</p>
                            <p class='GalleryTabelTag'>产品设计 / 毕业设计</p>
                        </div>
                    </div>
                </td>
                <td>
                    <div class='GalleryTabelIMG' style="background:url('../img/首页学生作品/作品6.jpg');background-size: 100%;">
                    </div>
                    <div class="WorkName">
                        <div>
                            <p class='GalleryTabelName'>表酱紫信息设计</p>
                            <p class='GalleryTabelTag'>视觉传达设计 / 商业推广</p>
                        </div>
                    </div>
                </td>
                <td>
                    <div class='GalleryTabelIMG' style="background:url('../img/首页学生作品/作品7.jpg');background-size: 100%;">
                    </div>
                    <div class="WorkName">
                        <div>
                            <p class='GalleryTabelName'>表酱紫</p>
                            <p class='GalleryTabelTag'>视觉传达 / 版式设计</p>
                        </div>
                    </div>
                </td>
                <td>
                    <div class='GalleryTabelIMG' style="background:url('../img/首页学生作品/作品8.jpg');background-size: 100%;">
                    </div>
                    <div class="WorkName">
                        <div>
                            <p class='GalleryTabelName'>基于多地形的播种机械改良</p>
                            <p class='GalleryTabelTag'>产品设计 / 农业机械设计</p>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class='GalleryTabelIMG' style="background:url('../img/首页学生作品/作品5.jpg');background-size: 100%;">
                    </div>
                    <div class="WorkName">
                        <div>
                            <p class='GalleryTabelName'>福“器”文创产品设计</p>
                            <p class='GalleryTabelTag'>视觉传达 / 毕业设计</p>
                        </div>
                        <p class="Cooperation">
                            合作项目
                            <img src="../icons/arrow_drop_down-24px.svg" alt="" style="margin-bottom: -5px;">
                        </p>
                    </div>
                </td>
                <td>
                    <div class='GalleryTabelIMG' style="background:url('../img/首页学生作品/作品6.jpg');background-size: 100%;">
                    </div>
                    <div class="WorkName">
                        <div>
                            <p class='GalleryTabelName'>17</p>
                            <p class='GalleryTabelTag'>视觉传达 / 书籍装帧</p>
                        </div>
                    </div>
                </td>
                <td>
                    <div class='GalleryTabelIMG' style="background:url('../img/首页学生作品/作品7.jpg');background-size: 100%;">
                    </div>
                    <div class="WorkName">
                        <div>
                            <p class='GalleryTabelName'>汇读空间</p>
                            <p class='GalleryTabelTag'>环境设计 / 获奖作品</p>
                        </div>
                    </div>
                </td>
                <td>
                    <div class='GalleryTabelIMG' style="background:url('../img/首页学生作品/作品8.jpg');background-size: 100%;">
                    </div>
                    <div class="WorkName">
                        <div>
                            <p class='GalleryTabelName'>夜归人</p>
                            <p class='GalleryTabelTag'>视觉传达 / 动画设计</p>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class='GalleryTabelIMG' style="background:url('../img/首页学生作品/作品5.jpg');background-size: 100%;">
                    </div>
                    <div class="WorkName">
                        <div>
                            <p class='GalleryTabelName'>作品名称</p>
                            <p class='GalleryTabelTag'>专业 / 方向</p>
                        </div>
                    </div>
                </td>
                <td>
                    <div class='GalleryTabelIMG' style="background:url('../img/首页学生作品/作品5.jpg');background-size: 100%;">
                    </div>
                    <div class="WorkName">
                        <div>
                            <p class='GalleryTabelName'>作品名称</p>
                            <p class='GalleryTabelTag'>专业 / 方向</p>
                        </div>
                    </div>
                </td>
                <td>
                    <div class='GalleryTabelIMG' style="background:url('../img/首页学生作品/作品5.jpg');background-size: 100%;">
                    </div>
                    <div class="WorkName">
                        <div>
                            <p class='GalleryTabelName'>作品名称</p>
                            <p class='GalleryTabelTag'>专业 / 方向</p>
                        </div>
                    </div>
                </td>
                <td>
                    <div class='GalleryTabelIMG' style="background:url('../img/首页学生作品/作品5.jpg');background-size: 100%;">
                    </div>
                    <div class="WorkName">
                        <div>
                            <p class='GalleryTabelName'>作品名称</p>
                            <p class='GalleryTabelTag'>专业 / 方向</p>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <div>
        <div class="button" style="width: 100px;margin: auto;padding: 16px 32px;padding-left: 45px;
        border: 1px solid #999999;font-size: 15px;">
            加载更多
            <img src="../icons/arrow_drop_down-24px.svg" alt="" style="width: 20px;margin-bottom: -5px;">
        </div>
    </div>
    <div class="footer">
        <div class="SuspensionLogo">
            <img class="footerLogo" src="../Logo/学校 logo.svg" alt="">
            <div
                style="width: 1px;margin-left: 28px;margin-right: 28px;display: inline-block;height: 44px;background-color: #bbbbbb;">
            </div>
            <img class="footerLogo" src="../Logo/景艺 logo.svg" alt="">
            <div class="FooterAddress">
                <p>地址 湖南省长沙市芙蓉区农大路1号 410001</p>
                <p>电话 (0731) 8461 8001</p>
            </div>
            <div class="FooterWechatAndWeibo">
                <div class="wechat">
                    <div class="wechatIMG">
                        <img src="../New Folder With Items/IMG_9450.JPG">
                    </div>
                    <img src="../New Folder With Items/wechat.svg" alt="">
                </div>
                <div class="weibo">
                    <img src="../New Folder With Items/weibo.svg" alt="">
                </div>
            </div>
        </div>
    </div>
    <div class="Suspension">
        © 2002-2020 湖南农业大学 Hunan Agricultural University | 湘教 QS3-200504-000029 | 湘ICP备 05000003号 | 湘公网备案
        43010202001068号
    </div>
    <div id='alernBox' style="display: none;">
        <div class="alernBoxBackground"></div>
        <div id="alernt">
            <div>
                <div class="alerntTitel">
                    <p id="Titel" style="">归园田居 - 深宫夏村景观规划设计</p>
                    <div id="AboutTheAuthor" class="AboutTheAuthor">
                        吴浩 黄子琪 李玉洁
                        <img src="../icons/arrow_drop_down-24px.svg" alt="">

                        <div id="ContactInformation" class="ContactInformation">
                            <ul id='alerntAuthor'>
                                <li>
                                    <span class="num">1. </span>
                                    <span class="name">
                                        吴浩
                                    </span>
                                    <span class="class">16级视觉传达设计</span>
                                </li>
                                <li class="mail">114591556@qq.com</li>
                            </ul>
                            <ul id='alerntAuthor'>
                                <li>
                                    <span class="num">2. </span>
                                    <span class="name">
                                        黄子琪
                                    </span>
                                    <span class="class">16级视觉传达设计</span>
                                </li>
                                <li class="mail">289830309@qq.com</li>
                            </ul>
                            <ul id='alerntAuthor'>
                                <li>
                                    <span class="num">1. </span>
                                    <span class="name">
                                        李玉洁
                                    </span>
                                    <span class="class">16级视觉传达设计</span>
                                </li>
                                <li class="mail">1263635593@qq.com</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div id="alrentclose" style="">
                    <img src="../icons/close.svg" alt="">
                </div>
            </div>
            <div ID="alerntIMG">
            </div>
            <div>
                <div class="Introduction">
                    <div class="IntroductionImg">
                        <img src="../img/首页学生作品/作品1.jpg" style='height: 30vw;' alt="">
                        <div>
                            <ul id='alerntTag'>
                                <li><span>1. </span>课程名称</li>
                                <p>无</p>
                                <li><span>2. </span>作品标签</li>
                                <p>视觉传达 / 品牌设计 / 包装设计</p>
                                <li><span>3. </span>完成时间</li>
                                <p>2018.12</p>
                                <li><span>4. </span>使用软件、工具</li>
                                <p>Adobe Ai / Adobe Ps</p>
                                <li><span>5. </span>获奖情况</li>
                                <p style="margin-bottom: 16px;">获得第四届国际设计大赛银奖</p>
                                <p>获得星沙有礼长沙县文化旅游商品创意大赛铜奖</p>
                            </ul>
                        </div>
                    </div>
                    <div class="IntroductionImg">
                        <img src="../img/首页学生作品/作品1.jpg" alt="">
                        <div id="IntroductionText">
                            <div></div>
                            <p>
                                古人有：这厢有礼了，实际指的是在古代时候的大户人家家里，小姐未出阁时是不出房门见外人的，所以有客来时，就说：这“厢”有礼，而现在的“厢”指的是这边的意思。“这厢有礼”通“这箱有礼”，由“箱”到“湘”，也即由“集装箱”到“湖湘文化”，贯穿着星沙的特色文化，带给来到星沙的游客来自星沙的味道，透过“这湘有礼”的认识去传达对长沙、对星沙的热爱及认识，帮助人们更好的去了解星沙，体验星沙的风情。
                            </p>
                        </div>
                    </div>
                    <div class="IntroductionImg">
                        <img src="../img/首页学生作品/作品1.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    // document.getElementById('alernt').style.width = (document.body.clientWidth - 100) + 'px';
    // document.getElementById('alerntIMG').style.height = (document.body.clientWidth - 100) / 16 * 9 + 'px';
    // 123
    function alrentBox() {
        $('#alernBox').css({
            'display': 'block'
        })
    }
    $("#alrentclose").click(
        function () {
            $('#alernBox').css({
                'display': 'none'
            })
        }
    );
</script>

</html>